<template>
	<view class="layer">
		<IndexHead :rightTapHandle1="rightTapHandle1" :config="navConfig"/>
		
		<!-- 热气球 -->
		<view class="Rqq">
			<navigator url="myLineUp2/lineup2">
				<view class="Rone">
					<view><image src="../../../static/myPic/reQiqiu.jpg" mode=""></image><view class="text1">热气球</view><view class="paidui">正在排队</view></view>
				</view>
				<hr>
				<view class="Rtwo">您的排队编号为:D210</view>
				<view class="Rthree">排队时间:2019-09-09  10:30</view>
				<view class="Rfour"><navigator url="">12人</navigator>正在排队，需等待21分钟</view>
				<hr>
			</navigator>
			
			<view class="Rfive">
				<view class="quxiao" type="button" @click="togglePopup('center', 'tip')"><i>取消排队</i></view>
				<navigator url="myLineUp2/lineup2"><text>查看详情</text></navigator>
			</view>
			<uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
			<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
				<view class="uni-tip">
					<view class="uni-tip-title">提示</view>
					<view class="uni-tip-content">是否需要再次排队</view>
					<view class="uni-tip-group-button">
						<view class="uni-tip-button" @click="cancel('tip')">取消</view>
						<view class="uni-tip-button" @click="cancel('tip')">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 过山车 -->
		<view class="Gsc">
			<navigator url="myLineUp2/lineup2">
				<view class="Gone">
					<view><image src="../../../static/myPic/guoshanche.jpg" mode=""></image><view class="text1">疯狂过山车</view><view class="paidui">正在排队</view></view>
				</view>
				<hr>
				<view class="Gtwo">您的排队编号为:D210</view>
				<view class="Gthree">排队时间:2019-09-09  09:58</view>
				<view class="Gfour"><navigator url="">18人</navigator>正在排队，需等待36分钟</view>
				<hr>
			</navigator>
			
			
			<view class="Gfive">
				<view class="quxiao" type="button" @click="togglePopup('center', 'tip')"><i>取消排队</i></view>
				<navigator url="myLineUp2/lineup2"><text>查看详情</text></navigator>
			</view>
			
			
			<uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
			<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
				<view class="uni-tip">
					<view class="uni-tip-title">提示</view>
					<view class="uni-tip-content">是否需要再次排队</view>
					<view class="uni-tip-group-button">
						<view class="uni-tip-button" @click="cancel('tip')">取消</view>
						<view class="uni-tip-button" @click="cancel('tip')">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
	
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
			components: {
				uniPopup
			},
			data(){
				return{
					show: false,
					type: '',
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:true,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'排队码',
							hasSearchMid:false,
							rtext: '筛选',
						},
						right:{
							// text:'筛选',
							// isShowRight:false,
							// ico:'/static/myPic/sousuo.png',//右侧图标地址
							// isShowRightIco:true,//是否显示右侧图标
						}
					},
					curTabIndex: 0,
					
				}
			},
			methods: {
				togglePopup(type, open) {
					
					
					this.type = type
					if (open === 'tip') {
						this.show = true
					} else {
						this.$refs[open].open()
					}
				},
				cancel(type) {
					if (type === 'tip') {
						this.show = false
						return
					}
					this.$refs[type].close()
				},
				change(e) {
					console.log(e.show)
				},
			}
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	.sx{
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color:#FFFFFF;
		position: absolute;
		margin-left: 622upx;
		margin-top: -135upx;
	}
	.button {
		margin: 20upx 0;
		width: 161upx;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #fff;
	}
	
	/* 热气球框 */
	.Rqq{
		margin-left: 29upx;
		margin-top: 19upx;
		width: 700upx;
		height: 394upx;
		border-radius: 15upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 20upx 0upx rgba(242,242,242,1);
	}
	.Rone{
		width: 700upx;
		height: 65upx;
	}
	.Rone image{
		margin-left: 33upx;
		margin-top: 15upx;
		border-radius: 50upx;
		width: 46upx;
		height: 46upx;
		float: left;
	}
	.Rone .text1{
		float: left;
		margin-left: 18upx;
		margin-top: 23upx;
		width: 80upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}
	.Rone .paidui{
		float: left;
		margin-left: 395upx;
		margin-top: 23upx;
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #999999;
	}
	.Rqq hr{
		border: none;
		margin-top: 18upx;
		width: 698upx;
		height: 1upx;
		color: #F6F6F6;
	}
	
	.Rtwo{
		margin-left: 33upx;
		margin-top: 28upx;
		width: 271upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Rthree{
		margin-left: 33upx;
		margin-top: 23upx;
		width: 371upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Rfour{
		margin-top: 39upx;
		margin-left: 176upx;
		margin-bottom: 39upx;
		float: left;
		width: 435upx;
		height: 30upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Rfour navigator{
		float: left;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #2B82FF;
	}
	.Rfive{
		width: 698upx;
		height: 80upx;
	}
	.Rfive .quxiao{
		width: 345upx;
		height: 80upx;
		float: left;
	}
	.Rfive .quxiao i{
		float: left;
		margin-left: 127upx;
		margin-top: 29upx;
		/* margin-bottom: 26upx; */
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #999999;
	}
	.Rfive navigator{
		width: 345upx;
		height: 80upx;
		float: left;
	}
	.Rfive navigator text{
		float: left;
		margin-top: 29upx;
		margin-left: 127upx;
		/* margin-bottom: 29upx; */
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #9CD0FF;
	}
	/* 疯狂过山车 */
	.Gsc{
		margin-left: 29upx;
		margin-top: 19upx;
		width: 700upx;
		height: 394upx;
		border-radius: 15upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 20upx 0upx rgba(242,242,242,1);
	}
	.Gone{
		width: 700upx;
		height: 65upx;
	}
	.Gsc image{
		margin-left: 33upx;
		margin-top: 15upx;
		border-radius: 50upx;
		width: 46upx;
		height: 46upx;
		float: left;
	}
	.Gsc .text1{
		float: left;
		margin-left: 18upx;
		margin-top: 23upx;
		width: 130upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}
	.Gsc .paidui{
		float: left;
		margin-left: 345upx;
		margin-top: 23upx;
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #999999;
	}
	.Gsc hr{
		border: none;
		margin-top: 18upx;
		width: 698upx;
		height: 1upx;
		color: #F6F6F6;
	}
	
	.Gtwo{
		margin-left: 33upx;
		margin-top: 28upx;
		width: 271upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Gthree{
		margin-left: 33upx;
		margin-top: 23upx;
		width: 371upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Gfour{
		margin-top: 39upx;
		margin-left: 176upx;
		margin-bottom: 39upx;
		float: left;
		width: 435upx;
		height: 30upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #000000;
	}
	.Gfour navigator{
		float: left;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #2B82FF;
	}
	.Gfive{
		width: 698upx;
		height: 80upx;
	}
	.Gfive .quxiao{
		width: 345upx;
		height: 80upx;
		float: left;
	}
	.Gfive .quxiao i{
		float: left;
		margin-left: 127upx;
		margin-top: 29upx;
		/* margin-bottom: 26upx; */
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #999999;
	}
	.Gfive navigator{
		width: 345upx;
		height: 80upx;
		float: left;
	}
	.Gfive navigator text{
		float: left;
		margin-top: 29upx;
		margin-left: 127upx;
		/* margin-bottom: 29upx; */
		width: 105upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #9CD0FF;
	}
	
	/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}
	
	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 15upx 15upx 15upx 159upx;
		font-size: 14px;
		color: #666;
	}
	
	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}
	
	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	
	/* 顶部分享 */
	.button {
		margin: 20upx 0;
	}
	
	.uni-share {
		background: #fff;
		/* margin: 150upx 0; */
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
